﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BuyShop.aspx.cs" Inherits="BookShopSys.BuyShop" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Js/jquery-2.0.0.min.js"></script>
    <title>购物车</title>
    <link href="Css/BuyShop.css" rel="stylesheet" />
    <link href="Css/layie/layui.css" rel="stylesheet" />
    <script src="Css/layie/layui.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="main layui-bg-#c2c2c2">
            <div class="layui-header">
                 <ul class="layui-nav" lay-filter="">
                        <li class="layui-nav-item"><a href="Index.aspx">图书管理系统</a></li>
                            <li class="layui-nav-item"><a href="Index.aspx">HOME</a></li>
                            <li class="layui-nav-item layui-this"><a href="Login.aspx">Login</a></li>
                            <li class="layui-nav-item"><a href="../Admaos/AdmainLogin.aspx">Admin</a></li>
                            <li class="layui-nav-item">
                                <a href="javascript:;">购物车</a>
                                <dl class="layui-nav-child">
                                    <!-- 二级菜单 -->
                                    <dd><a href="BuyShop.aspx">SHoop</a></dd>
                                    <dd><a href="Member.aspx">个人中心</a></dd>
                                </dl>
                            </li>
                        </ul>                
            </div>
            <div class="good-list">
                <ul id="ul">
                    <li>
                        <img src="Img/BaiNainGuDu.jpg" />
                        <p class="good-name">百年孤独</p>
                        <p class="good-pice">￥16.00</p>
                    </li>
                    <li>
                        <img src="Img/SanTi.jpg" />
                        <p class="good-name">三体</p>
                        <p class="good-pice">￥19.00</p>
                    </li>
                    <li>
                        <img src="Img/HuoZhe.jpg" />
                        <p class="good-name">活着</p>
                        <p class="good-pice">￥15.00</p>
                    </li>
                    <li>
                        <img src="Img/NuoWeiDeSenLin.jpg" />
                        <p class="good-name">挪威的森林</p>
                        <p class="good-pice">￥23.00</p>
                    </li>
                    <li>
                        <img src="Img/YunBianYouGeXiaoMaiBu.jpg" />
                        <p class="good-name">云边有个小卖部</p>
                        <p class="good-pice">￥20.00</p>
                    </li>
                    <li>
                        <img src="Img/TianGuoLvXing.jpg" />
                        <p class="good-name">天国旅行</p>
                        <p class="good-pice">￥13.00</p>
                    </li>
                    <li>
                        <img src="Img/RenShengHaiHai.jpg" />
                        <p class="good-name">人生海海</p>
                        <p class="good-pice">￥20.00</p>
                    </li>
                    <li>
                        <img src="Img/BaiYeXing.jpg" />
                        <p class="good-name">白夜行</p>
                        <p class="good-pice">￥32.00</p>
                    </li>
                    <li>
                        <img src="Img/ShengSiPiLao.jpg" />
                        <p class="good-name">生死疲劳</p>
                        <p class="good-pice">￥34.00</p>
                    </li>
                    <li>
                        <img src="Img/YiShengQianAn.jpg" />
                        <p class="good-name">一生欠安</p>
                        <p class="good-pice">￥45.00</p>
                    </li>
                    <li>
                        <img src="Img/ZhongGuoLiShi.jpg" />
                        <p class="good-name">中国历史</p>
                        <p class="good-pice">￥36.00</p>
                    </li>
                    <li>
                        <img src="Img/TainCaiZaiZuo%20FengZiZaiYou.jpg" />
                        <p class="good-name">天才在左 疯子在右</p>
                        <p class="good-pice">￥31.00</p>
                    </li>
                    <li>
                        <img src="Img/ShaSiYiZhiZhiGengNiao.jpg" />
                        <p class="good-name">杀死一只知更鸟</p>
                        <p class="good-pice">￥25.00</p>
                    </li>
                    <li>
                        <img src="Img/BiAnFengJing.jpg" />
                        <p class="good-name">彼岸风景</p>
                        <p class="good-pice">￥21.00</p>
                    </li>
                    <li>
                        <img src="Img/NanMingShi.jpg" />
                        <p class="good-name">南明史</p>
                        <p class="good-pice">￥18.00</p>
                    </li>
                    <li>
                        <img src="Img/XiaoLvRenSheng.jpg" />
                        <p class="good-name">效率人生</p>
                        <p class="good-pice">￥38.00</p>
                    </li>
                </ul>
            </div>
            <div id="demo0"></div>
            <div class="shopping">
                <table border="1" bordercolor="#CCC" cellspacing="0" id="tb" class="layui-table" lay-size="sm">
                    <tr height="45">
                        <th width="10%">
                            <input type="checkbox" value="全选" onclick="allSelect(this.checked),total()" id="isAllSelect" />&nbsp;全选</th>
                        <th width="15%">图片</th>
                        <th width="25%">名称</th>
                        <th width="15%">单价</th>
                        <th width="25%">数量</th>
                        <th>操作</th>
                    </tr>

                    <tr>
                        <td style="border-right: none;">
                            <input type="button" value="删除选择" id="deleteAll" onclick="deletAllSelect()" /></td>
                        <td style="border-left: none;" colspan="5" align="right">合计：￥<span id="totalSpan">0</span>
                            <input type="button" id="pay" value="结算(0)" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="layui-footer" style="width: 100%; height: 50px; background-color: black">
                <!-- 底部固定区域 -->
                <label class="layui-font-gray">图书商城</label>
            </div>
        </div>
    </form>
    <script>
        window.onload = function () {
            var tB = document.getElementById("tb");
            //从localstroage中取出保存的购物车信息
            if (window.localStorage) {
                var shoppingInfoText = localStorage.getItem("shoppingInfo");
                if (shoppingInfoText != null) {
                    //将本地存储加入购物车列表。
                    var shoppingInfoObject = JSON.parse(shoppingInfoText);
                    for (var i = 0; i < shoppingInfoObject.length; i++) {
                        var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
                        tr.align = "center";
                        var td1 = tr.insertCell(tr.cells.length);
                        td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
                        var td2 = tr.insertCell(tr.cells.length);
                        td2.innerHTML = "<img src='" + shoppingInfoObject[i].imgPath + "' height='30px' />";
                        var td3 = tr.insertCell(tr.cells.length);
                        td3.innerHTML = shoppingInfoObject[i].goodName;
                        var td4 = tr.insertCell(tr.cells.length);
                        td4.innerHTML = shoppingInfoObject[i].goodPrice;
                        var td5 = tr.insertCell(tr.cells.length);
                        var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
                        td5HTML += "<span class='number'>" + shoppingInfoObject[i].num + "</span>";
                        td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
                        td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
                        var td6 = tr.insertCell(tr.cells.length);
                        td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>删除</button>"
                        tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false
                    }
                    total();
                }
            }
            tb.rows[0].cells[0].children[0].checked = false; //‘全选’默认为false
            //加载事件中获取列表的所有li标签
            var getLi = document.querySelectorAll("#ul li");
            for (var i = 0; i < getLi.length; i++) {
                getLi[i].onclick = function () {
                    var imgPath = this.children[0].getAttribute("src");
                    var goodName = this.children[1].innerHTML;
                    var goodPrice = this.children[2].innerHTML;
                    var isExist = false;
                    for (var i = 1; i < tb.rows.length - 1; i++) {
                        if (tb.rows[i].cells[2].innerHTML == goodName) {
                            //检查商品是否已在购物车，存在则叠加
                            var carExistNum = parseInt(tb.rows[i].cells[4].children[0].children[1].innerHTML);
                            tb.rows[i].cells[4].children[0].children[1].innerHTML = carExistNum + 1;
                            isExist = true;
                            if (window.localStorage) {
                                var shoppingInfoText = localStorage.getItem("shoppingInfo");
                                var shoppingInfoObject = JSON.parse(shoppingInfoText);
                                shoppingInfoObject[tb.rows.length - i - 2].num++;
                                localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
                            }
                            break;
                        }
                        //				//自定选择，当全部选取
                        //				var isSelect1 = tb.rows[i].cells[0].children[0];
                        //					console.log(isSelect1[i]);
                        //				if(isSelect1.checked){
                        //					tb.rows[0].cells[0].children[0].checked = true;//全部‘全选’为true
                        //				}
                    }
                    if (isExist == false) {
                        var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
                        tr.align = "center";
                        var td1 = tr.insertCell(tr.cells.length);
                        td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
                        var td2 = tr.insertCell(tr.cells.length);
                        td2.innerHTML = "<img src='" + imgPath + "' height='30px' />";
                        var td3 = tr.insertCell(tr.cells.length);
                        td3.innerHTML = goodName;
                        var td4 = tr.insertCell(tr.cells.length);
                        td4.innerHTML = goodPrice;
                        var td5 = tr.insertCell(tr.cells.length);
                        var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
                        td5HTML += "<span class='number'>1</span>";
                        td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
                        td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
                        var td6 = tr.insertCell(tr.cells.length);
                        td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>删除</button>"
                        tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false

                        if (window.localStorage) {
                            var shoppingInfoText = localStorage.getItem("shoppingInfo");
                            var shoppingInfoObject = null;
                            if (shoppingInfoText == null) {
                                shoppingInfoObject = [];
                            } else {
                                shoppingInfoObject = JSON.parse(shoppingInfoText); //转数组
                            }
                            var goods = new Object();
                            goods.imgPath = imgPath;
                            goods.goodName = goodName;
                            goods.goodPrice = goodPrice;
                            goods.num = 1;
                            shoppingInfoObject.push(goods);
                            localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
                        }
                    }
                    total(); //总计
                }
            }
        }
        //计算合计函数
        function total() {
            var totalMoney = 0;
            var totalNum = 0;
            for (var i = 1; i < tb.rows.length - 1; i++) {
                var box = tb.rows[i].cells[0].children[0];
                if (box.checked) {
                    //获取出单价 转为浮点型
                    var price = parseFloat(tb.rows[i].cells[3].innerHTML.substring(1,));
                    var num = parseFloat(tb.rows[i].cells[4].children[0].children[1].innerHTML);
                    totalMoney += price * num;
                    totalNum += num;
                }
            }
            document.getElementById("pay").value = "结算(" + totalNum + ")";
            document.getElementById("totalSpan").innerHTML = totalMoney;
        }
        //全选功能函数
        function allSelect(isSelect) {
            for (var i = 1; i < tb.rows.length - 1; i++) {
                if (isSelect) {
                    tb.rows[i].cells[0].children[0].checked = true;
                } else {
                    tb.rows[i].cells[0].children[0].checked = false;
                }
            }
        }
        //删除全选功能函数
        function deletAllSelect() {
            var boxes = document.getElementsByName("isCheckbox");
            for (i = 0; i < boxes.length; i++) {
                if (boxes[i].checked) {
                    tr = boxes[i].parentNode.parentNode;
                    tr.parentNode.removeChild(tr);
                    if (window.localStorage) {
                        var shoppingInfoText = localStorage.getItem("shoppingInfo");
                        var shoppingInfoObject = JSON.parse(shoppingInfoText);
                        shoppingInfoObject.splice(i - 1, 1);
                        //删除完存储
                        localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
                    }
                    i--;
                }
            }
            document.getElementById("pay").value = "结算(0)";
            document.getElementById("totalSpan").innerHTML = 0;
            tb.rows[0].cells[0].children[0].checked = false;
        }
        //删除一个功能函数
        function deleteAShop(isShop) {
            var indexTr = isShop.rowIndex;
            isShop.parentNode.removeChild(isShop);
            if (window.localStorage) {
                var shoppingInfoText = localStorage.getItem("shoppingInfo");
                var shoppingInfoObject = JSON.parse(shoppingInfoText);
                shoppingInfoObject.splice(tb.rows.length - indexTr - 1, 1);
                localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
            }
            total();
        }
        //加一操作
        function addA(a) {
            var num = parseInt(a.children[1].innerHTML);
            a.children[1].innerHTML = num + 1;
            var index = a.parentNode.parentNode.rowIndex;
            if (window.localStorage) {
                var shoppingInfoText = localStorage.getItem("shoppingInfo");
                var shoppingInfoObject = JSON.parse(shoppingInfoText);
                shoppingInfoObject[tb.rows.length - index - 2].num++;
                localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
            }
        }
        //减一操作
        function subtractA(a) {
            var num = parseInt(a.children[1].innerHTML);
            if (num > 1) {
                a.children[1].innerHTML = num - 1;
                var index = a.parentNode.parentNode.rowIndex;
                if (window.localStorage) {
                    var shoppingInfoText = localStorage.getItem("shoppingInfo");
                    var shoppingInfoObject = JSON.parse(shoppingInfoText);
                    shoppingInfoObject[tb.rows.length - index - 2].num--;
                    localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
                }
            }
        }
    </script>
</body>
</html>
